<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="/css/webuploader.css">
    <title>Document</title>
    <style>
        .form-container {
            display: flex;
            justify-content: center;
            box-sizing: border-box;
            width: 100%;
        }

        .form legend {
            text-align: center;
        }

        .form {
            width: 30%;
            line-height: 30px;
        }

        .form .upload {
            box-sizing: border-box;
            position: relative;
            margin: 0 30px;
            float: right;
            width: 60px;
            height: 60px;
            border: 1px solid gray;
            line-height: normal;
            font-size: 14px;
            text-align: center;

        }

        .upload input {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            cursor: pointer;
        }

        .upload span {
            display: inline-block;
            box-sizing: border-box;
            padding: 12px;
            width: 100%;
            height: 100%;
            cursor: pointer;
            text-align: center
        }
        .upload span img {
            width: 100%;
            height: 100%;
        }

        #checkOne select{
            width: 160px;
            display: block
        }

        #checkOne,
        #checkMore {
            display: none;
            line-height: 40px;
        }



        @media (max-width:720px) {
            .form {
                width: 70%;
            }
        }

        @media (max-width:560px) {
            .form {
                width: 90%;
            }
        }
    </style>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
    <section class="form-container">
        <form action="" class="form">
            <fieldset>
                <legend>表单标题12312312312</legend>
                <p>简介</p>
                <input type="checkbox" value="" id="radio" />是否使用单选框
                <div class="upload">
                    <input type="file" id="upload-file"/>
                   <%-- <input type="file" id="file" onchange="showPreview(this, 'portrait')" />--%>
                    <span>图片上传</span>
                </div>
                <img src="" id="portrait" style="width: 200px; height: 200px; /*display: block;*/" hidden />
                <div id="checkOne">
                    <input id="checkOneName" type="text" placeholder="填写元素名称" /><br/>
                    <input id="checkOneContent" type="text" placeholder="填写元素内容" />
                    <select name="">3
                        <option value="1" selected>1</option>
                        <option></option>
                    </select>
                </div>
                <br/>
                <input type="checkbox" value="" id="checkbox" />是否使用多选框

                <br />
                <div id="checkMore">
                    <input id="checkMoreName" type="text" placeholder="填写元素名称" />
                <br/>
                    <input id="checkMoreContent" type="text" placeholder="填写元素内容" /><button>增加一个内容</button>
                    <br />
                    <div id="start">
                        <input type="text" placeholder="起始时间" disabled>
                    </div>
                    <div id="end">
                        <input type="text" placeholder="终止时间" disabled>
                    </div>
                </div>
                <button>提交</button>

            </fieldset>
        </form>
    </section>
</body>
<script src="./js/datepicker.js"></script>
<script>
    function showPreview(source, imgId) {
        alert(1231)
        console.log(123123);
        var file = source.files[0];
        if(window.FileReader) {
            var fr = new FileReader();
            fr.onloadend = function(e) {
                document.getElementById(imgId).src = e.target.result;
            }
            fr.readAsDataURL(file);
        }
    }
    (function (win) {
        function load() {

            const radio = document.getElementById('radio')
            const checkbox = document.getElementById('checkbox')
            const checkOne = document.getElementById('checkOne')
            const checkMore = document.getElementById('checkMore')
            const start = document.getElementById('start')
            const end = document.getElementById('end')

            radio.addEventListener('click', function (e) {
                if (radio.checked == true) {
                    checkOne.style.display = 'block'
                }
                else {
                    checkOne.style.display = 'none'
                }
                return false
            })
            checkbox.addEventListener('click', function () {
                if (checkbox.checked == true) {
                    checkMore.style.display = 'block'
                }
                else {
                    checkMore.style.display = 'none'
                }
                return false
            })
        }
        let startCalendar = new datePicker()
        let endCalendar = new datePicker()
        startCalendar.init({
            'trigger': '#start', /*按钮选择器，用于触发弹出插件*/
            'type': 'date',/*模式：date日期；datetime日期时间；time时间；ym年月；*/
            'minDate': new Date(),/*最小日期*/
            'maxDate': '2100-12-31',/*最大日期*/
            'onSubmit': function () {/*确认时触发事件*/
                start.getElementsByTagName('input')[0].value = startCalendar.value;
                endCalendar.init({
                    'trigger': '#end',
                    'type': 'date',
                    'minDate': startCalendar.value,
                    'maxDate': '2100-12-31',
                    'onSubmit': () => {
                        end.getElementsByTagName('input')[0].value = endCalendar.value
                    }
                })

            },
            'onClose': function () {/*取消时触发事件*/
            }
        })

        const upload = $('#upload-file')
        upload.change(function (e) {
            let file = e.target.files[0]
            let src = window.URL.createObjectURL(file);
            $('.upload>span')[0].innerHTML = ''
            $('.upload>span')[0].style.background = `url(${src}) no-repeat`
            $('.upload>span')[0].style.backgroundSize = '100% 100%'
            
        })
        win.addEventListener('DOMContentLoaded', load)

    })(window, undefined)
</script>

</html>